<template>
    <div class="container">
        <div class="card">
            <el-breadcrumb separator="/" class="card-body">
                <el-breadcrumb-item :to="{ path: '/AdminHome' }"><i class="el-icon-location"></i>首页</el-breadcrumb-item>
                <el-breadcrumb-item :to="{ path: '/SystemSetting/FormSetting' }">分类管理</el-breadcrumb-item>
                <el-breadcrumb-item>{{ this.$route.meta.title }}</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="card">
            <div class="card-header">表单信息
                      <div class="f-right">
                        <el-button type="warning" icon="el-icon-plus" @click="dialogVisible = true">添加字段</el-button>             
                    </div> 
            </div>
              
            <div class="card-body">
                <el-form ref="classForm" :model="form" :rules="rules" label-width="120px">
                <div class="info-ruleForm">
                                        <el-form-item label="表单名称"  >
                            <el-input v-model="SubmitForm.name" ></el-input>
                        </el-form-item>
                                  <el-form-item label="分类">
                                     <el-select v-model="SubmitForm.typeId" placeholder="请选择">
                                         <el-option  v-for="item in options"
                                         :key="item.id"
                                         :label="item.name"
                                         :value="item.id">
                                   </el-option>
                                      </el-select>
                                  </el-form-item>
                    <div class="info-ruleForm">
                        <el-form-item label="申请人">
                            <el-input  placeholder="选择其他申请人,流程为代理申请" disabled="true">
                                   <div class="setPosition">
                                     
                                  </div>
                            </el-input>
                        </el-form-item>
                        <el-form-item label="申请日期"  >
                            <el-date-picker type="date" placeholder="选择日期" disabled="true"></el-date-picker>
                        </el-form-item>
                        <el-form-item label="部门">
                            <el-input ref="userFind" disabled="true ">
                               <div class="setPosition">  
                                  </div>
                            </el-input>
                        </el-form-item>
                        <el-form-item label="房间号"  >
                            <el-input disabled="true " ></el-input>
                        </el-form-item>
                        <el-form-item label="手机号码" >
                            <el-input disabled="true "></el-input>
                        </el-form-item>
<!--额外的字段拼接 start--> <div class="extraForm">
                             <el-form-item :label="item.formName" v-for="(item,index) in SubmitForm.flowExtraApplyList" :key="index" v-show="item.isShow">       
                                     <el-input v-if="item.domName == 'input'"  disabled="true"></el-input>
                                      <div class="f-right child"><span class="remove" @click="removeExtraForm(index)">删除</span></div>
                                      <el-radio-group v-if="item.domName == 'radio'  && item.isShow" disabled="true">
                                          <el-radio v-for="val in toArray(item.optionalValue)" :label="val" :key="val.index"></el-radio>
                                      </el-radio-group>
                                      <el-checkbox-group v-if="item.domName == 'checkbox'  && item.isShow" disabled="true">
                                          <el-checkbox :label="val"  v-for="val in toArray(item.optionalValue)" :key="val.index"></el-checkbox>
                                      </el-checkbox-group>  
                                    <el-select v-if="item.domName == 'select'  && item.isShow"  placeholder="请选择">
                                     <el-option :label="val"  v-for="val in toArray(item.optionalValue)" :key="val.index" >{{val}}</el-option>
                                    </el-select>    
                              </el-form-item></div>
<!--额外的字段拼接 end-->
                        <!-- <el-form-item label="操作系统">
                            <el-select placeholder="请选择操作系统">
                                <el-option value="window10 64bit pro">window10 64bit pro</el-option>
                                <el-option value="window 7 64bit">window 7 64bit</el-option>
                                <el-option value="CentOS 7.5">CentOS 7.5</el-option>
                                <el-option value="RedHat 12">RedHat 12</el-option>
                            </el-select>
                        </el-form-item> -->
                        <!-- <el-form-item label="预装软件列表">
                            <el-checkbox-group class="authList">
                                <el-checkbox label="Adobe Acrobat 7.0" name="softList"></el-checkbox>
                                <el-checkbox label="AutoCAD 2004" name="softList"></el-checkbox>
                                <el-checkbox label="Phontshop CC2018" name="softList"></el-checkbox>
                                <el-checkbox label="ACD SEE" name="softList"></el-checkbox>
                                <el-checkbox label="万能五笔" name="softList"></el-checkbox>
                                <el-checkbox label="紫光拼音" name="softList"></el-checkbox>
                                <el-checkbox label="金山词霸" name="softList"></el-checkbox>
                                <el-checkbox label="Office2007" name="softList"></el-checkbox>
                                <el-checkbox label="WinRAR" name="softList"></el-checkbox>
                                <el-checkbox label="PdxReader" name="softList"></el-checkbox>
                            </el-checkbox-group>
                        </el-form-item> -->
                        <!-- <el-form-item label="其他软件" >
                            <el-input  placeholder="多个软件请用 , 逗号隔开 "></el-input>
                        </el-form-item> -->
                        <el-form-item label="申请理由" >
                            <el-input type="textarea"  placeholder="请说明申请理由" disabled="true"></el-input>
                        </el-form-item>
                    </div>               
                </div>


                <hr>
                <el-form-item>
                    <el-button type="primary" @click="onSubmit()" :disabled="disabled">立即创建</el-button>
                    <el-button @click="goBack">返回上一级</el-button>
                </el-form-item>
                </el-form>
            </div>
        </div> 
                <!-- 添加额外字段开始-->       
                <el-dialog  title="提示" :visible.sync="dialogVisible" width="50%" :before-close="handleClose" :modal-append-to-body="false">
                          <div class="card">
            <div class="card-header">
              填写字段信息
            </div>
            <div class="card-body">
                <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="180px"  >
                    <div class="info-ruleForm"  >
                        <el-form-item label="字段名称" prop="formName">
                            <el-input v-model="ruleForm.formName"></el-input>
                        </el-form-item>
      
                         <el-form-item label="属性是否默认显示">
                            <el-radio-group v-model="ruleForm.isShow">
                                <el-radio :label="true">显示</el-radio>
                                <el-radio :label="false">隐藏</el-radio>
                            </el-radio-group>
                        </el-form-item>
                        <el-form-item label="属性是否可选">
                            <el-radio-group v-model="ruleForm.domName">
                                <el-radio label="input">唯一属性</el-radio>
                                <el-radio label="radio">单选属性</el-radio>
                                <el-radio label="checkbox">复选属性</el-radio>
                                 <el-radio label="select">下拉框属性</el-radio>
                            </el-radio-group>
                            <p class="tips">选择"单选/复选属性"时，可以该分类设置多个值。选择"唯一属性"时，该分类资产的该属性值只能设置一个值。</p>
                        </el-form-item>
                        <el-form-item label="该属性值的录入方式">
                            <el-input :disabled="ruleForm.domName=='input'" type="textarea" v-model="ruleForm.optionalValue" placeholder="多个值,请输入 ';(英文分号)' 隔开"></el-input>
                        </el-form-item>
                    </div>
                    <hr>
                    <!-- <el-form-item>
                        <el-button type="primary" @click="addExtraForm('ruleForm')" :disabled="disabled">立即保存</el-button>
                        <el-button @click="goBack">返回</el-button>
                    </el-form-item> -->
                </el-form>                
            </div>
        </div>
        {{ ruleForm }}
                    <span slot="footer" class="dialog-footer">
                     <el-button @click="dialogVisible = false">取 消</el-button>
                     <el-button type="primary"  @click="addExtraForm()" >确 定</el-button>
                    </span>
                </el-dialog>
                    <!-- 添加额外字段结束-->   
                       {{ ruleForm }}    
        {{ SubmitForm }}
    </div>

</template>

<script>
import request from "@/utils/request";
export default {
  name: "Create",
  data() {
    return {
      SubmitForm: {
        flowExtraApplyList: [],
        typeId:"",
        name:""
      },
      disabled: false,
      myIsShow:true,
      ruleForm: {
        isShow: true,
        formName: "",
        domName: "input",
        optionalValue: ""
      },
      rules: {
        propertyName: [
          { required: true, message: "请输入属性名称", trigger: "blur" },
          { min: 1, max: 15, message: "长度在 1 到 15 个字符", trigger: "blur" }
        ]
      },
      dialogVisible: false,
      options: [],
      selectedOptions: [],
      disabled: false,
      showTree: false,
      treeType: "",
      rules: {
        label: [
          { required: true, message: "请输入分类名称", trigger: "blur" },
          { min: 1, max: 15, message: "长度在 1 到 15 个字符", trigger: "blur" }
        ]
      }
    };
  },
  methods: {
    onSubmit() {
     // this.disabled = true;
         request({
            method: "post",
            url: this.$api.createFlowForm,
            data: this.SubmitForm
          }).then(res => {
            this.$message.success("保存成功!");
            this.goBack();
          });
      // this.$refs[SubmitForm].validate(valid => {
      //   if (valid) {

      //   } else {
      //     this.disabled = false;
      //     return false;
      //   }
      // });
    },
    goBack() {
      this.$router.go(-1);
    },

    getAllType() {
      request({
        url: this.$api.getAllFlowType,
        method: "get"
      }).then(res => {
        this.options = res.data;
      });
    },
    createAttriBute() {
      this.$router.push({
        path: "/SystemSetting/FormSetting/FormSettingAttriBute/Create"
      });
    },
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then(_ => {
          done();
        })
        .catch(_ => {});
    },

    addExtraForm() {
      this.dialogVisible = false;
      let ruleForm = JSON.parse(JSON.stringify(this.ruleForm));
      this.SubmitForm.flowExtraApplyList.push(ruleForm);

      console.log(this.SubmitForm.flowExtraApplyList);
    },

    toArray(string) {
      return string.split(";");
    },
    removeExtraForm(index){
      this.SubmitForm.flowExtraApplyList.splice(index,1);
    },
  },
  mounted() {
    //初始化所有流程分类
    this.getAllType();
  },
  computed: {
    //初始化流程分类选项
    //注册树形菜单数据

    //上级菜单
    parentId: function() {
      if (this.$store.getters.treeData.ref !== "bm") {
        return this.form.parentLabel;
      } else {
        this.form.parentId = this.$store.getters.treeData.id;
        return (this.$refs.bm.value = this.$store.getters.treeData.val);
      }
    }
  }
};
</script>
<style scoped>
.extraForm .child{
   display:none;   
}
.extraForm:hover .child{
     display:block;   
}
.extraForm:hover .child .remove{
    cursor:pointer;
}
</style>